
// 1 初始化下标
var curI = 1 ;
var tabsStr = ""; // 拼接点【分页器字符串】
var timer = null;
// 2 渲染图片
$(".pics").innerHTML = data.map(function(picObj , i){
    tabsStr += `<span class="${curI === i ? 'active' : ''}"></span>`
    return `
        <li class="${curI === i ? 'opacity' : ''}">
            <img src="${picObj.src}" alt="">
            <p>${picObj.des}</p>
        </li>
    `
}).join("")
// 3 将拼接好的分页器span 作为tab的内容
$(".tabs").innerHTML = tabsStr
// 4 获取分页器 和 图片
var tabs = [...$(".tabs").children] , 
    pics = [...$(".pics").children] ;

// 5 给分页器绑定点击事件
tabs.forEach(function(tabSpan , i){
    tabSpan.onclick = function(){
        // 排他  
        changeTabFn(i)
    }
})
// 6 给下绑定事件
$(".next").onclick = nextImg;
// 7 给上绑定事件
$(".prev").onclick = function(){
    var index = curI - 1;
    if(index < 0) index = pics.length - 1;
    changeTabFn(index)
}
// 8 自动轮播  即 再指定的事件段内 点击了下一张的操作
timer = setInterval( nextImg , 3000)

// 9 鼠标进入 banner 整个区域时   停止轮播 即 清除定时器
// onmouseover 鼠标滑过
// onmouseout 鼠标离开
$(".banner").onmouseover = function(){
    clearInterval(timer)
}
$(".banner").onmouseout = function(){
    timer = setInterval( nextImg , 3000)
}

// 下一张函数 
function nextImg(){
    var index = curI + 1;
    // 判断如果是最后一个 重头再来
    if(index > pics.length - 1) index = 0;
    changeTabFn(index)
}

// 封装切换高亮的函数
function changeTabFn(i){
    // 将之前的高亮取消
    tabs[curI].classList.remove("active")
    pics[curI].classList.remove("opacity")
    // 让curI 赋值为当前点击的下标
    curI = i
    // 给当前显示
    tabs[curI].classList.add("active")
    pics[curI].classList.add("opacity")
}

// 由于操作元素较多 封装获取元素的函数
function $(el) { return document.querySelector(el) }

function gets(el) { return [...document.querySelectorAll(el)] }